<template>
	<view class="container">
		<tui-loading v-show="!pageData.loading"></tui-loading>
		<view class="page" v-show="pageData.loading">
			<!--header-->
			<view class="top_bar">
				<view class="logo">
					<image src="../static/index/logo.png" mode=""></image>
				</view>
				<view class="search_box">
					<u-search placeholder="请输入搜索关键字" v-model="pageData.keyword" @change="setInput" @search="confirmInput" :showAction="false" bgColor="#FFFFFF" searchIconColor="#CCCCCC" placeholderColor="#CCCCCC" searchIconSize="24"></u-search>
				</view>
			</view>
			<!--header-->
			<view class="tui-banner-swiper">
				<swiper class="tui-banner-box" :indicator-dots="true" :autoplay="true" :interval="5000" :duration="150" :circular="true" style="height: 300rpx;">
					<swiper-item v-for="(item, index) in pageData.banner.data" :key="index" class="tui-banner-item">
						<image :src="item.small.url" class="tui-slide-image" :class="[pageData.banner.current != index ? 'tui-banner-scale' : '']" mode="scaleToFill" @tap="detail('banner',item)" />
					</swiper-item>
				</swiper>
			</view>
			<view class="notice">
				<view class="notice_icon">
					<image src="../static/index/fire.png" mode=""></image>
					<span style="font-weight: 900;font-size: 28rpx;color: #36B184;">站内</span>
					<span style="font-weight: 900;font-size: 28rpx;color: #333333;">通知</span>
				</view>
				<view class="notice_list">
					<view class="notice_item" v-for="(item,index) in notice_list" :key="index">
						<view class="notice_text">
							{{ item.text }}
						</view>
					</view>
				</view>
			</view>
			<view class="menu_list" v-if="pageData.keyword===''">
				<view class="menu_item" v-for="(item, index) in pageData.nav" :key="index" @tap="detail('banner',item)">
					<view class="menu_img">
						<image :src="item.small.url" mode=""></image>
					</view>
					<view class="menu_text">
						{{item.title}}
					</view>
				</view>
			</view>
			<view class="cate_list" v-if="pageData.keyword===''">
				<view class="cate_item" v-for="(item, index) in pageData.advertisement" :key="index" @tap="detail('banner',item)">
					<image :src="item.small.url" mode=""></image>
				</view>
			</view>

			<view class="tui-title-img">
				<image src="../static/img/img_home_update_3x.png" mode="widthFix"></image>
			</view>
			<view class="tui-product-box" v-if="listData.data.length>0">
				<goodsList :list="listData.data" showType="list" @click="detail" />
				<tui-loadmore :index="3" :type="tui.getColorSite().loadmore.type" v-if="listData.xhr.status && listData.status" :text="listData.xhr.text"></tui-loadmore>
				<tui-divider width="60%" :dividerColor="tui.getColorSite().divider.dividerColor" :color="tui.getColorSite().divider.color" v-if="!listData.xhr.status && listData.status">{{ listData.xhr.text }}</tui-divider>
				<view style="height: 130rpx;"></view>
			</view>
			<view class="tui-safearea-bottom"></view>
		</view>
	</view>
</template>

<script>
	import formCheck from '@/components/common/tui-validation/tui-validation.js'
	export default {
		data() {
			return {
				get: {},
				header: {
					title: '积分商城', //NavigationBar标题
					splitLine: true, //是否需要分割线
					isOpacity: false, //是否设置不透明度
					maxOpacity: 1, //不透明度最大值 0-1
					transparent: false, //背景透明 （设置该属性，则背景透明，只出现内容，isOpacity和maxOpacity失效）
					scrollTop: 0, //滚动条滚动距离
					scrollRatio: 0.3, //isOpacity 为true时生效（opacity=scrollTop /windowWidth * scrollRatio）
					isCustom: false, //是否自定义NavigationBar内容
					isImmersive: true, //是否沉浸式,
					isFixed: true, //是否固定
					backdropFilter: false, //是否开启高斯模糊效果[仅在支持的浏览器有效果]，为true时maxOpacity设置小于1的值
					dropDownHide: false, //下拉隐藏NavigationBar，主要针对有回弹效果ios端
					zIndex: 9998, //z-index值
					init: {
						width: 0,
						height: 0,
						left: 0,
						top: 0,
						top: 0,
						scrollH: 0,
					},
				},
				pageData: {
					loading: false,
					keyword: '',
					banner: {
						count: 0,
						current: 0,
						data: [],
					},
					nav: [],
					advertisement: [],
				},
				notice_list: [
					// 
					{
						text: '新注册会员全场商品9折',
					},
				],
				listData: {
					data: {},
					count: 0,
					page: 0,
					length: 0,
					isMore: false,
					xhr: {
						url: '/goods',
						status: true,
						text: '正在加载...',
					},
					status: true,
				},
				appInit: {},
				user: {},
			}
		},
		// 监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
		onLoad(e) {
			let that = this;
			// uni.startPullDownRefresh();
			console.log("self:onLoad++++++++++++++++++++++++++++++++++++++++++++++++++");
			uni.stopPullDownRefresh(); //停止当前页面下拉刷新
			if (typeof(e.scene) != 'undefined') {
				e = that.tui.getUrlkey(decodeURIComponent(e.scene));
			}
			that.get = e;
			if (typeof that.get.title !== 'undefined') {
				that.header.title = that.get.title;
				if (that.header.title.length > 13) {
					that.header.title = that.header.title.slice(0, 13) + '...';
				}
			}
			console.log("self:getData=>", that.get);
			let obj = {};
			uni.getSystemInfo({
				success: function(res) {
					that.header.init.width = obj.left || res.windowWidth;
					that.header.init.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44;
					that.header.init.top = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6;
					that.header.init.scrollH = res.windowWidth * 0.6;
					that.header.init.scrollH = res.windowWidth * 1;
				}
			});
			that.$forceUpdate();
		},
		// 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
		onShow() {
			let that = this;
			that.listData.data = [];
			that.listData.page = 0;
			that.initialize();
		},
		// 监听页面滚动，参数为Object
		onPageScroll(e) {
			let that = this;
			that.header.scrollTop = e.scrollTop;
			that.$forceUpdate();
		},
		methods: {
			setInput(e) {
				let that = this;
				that.pageData.keyword = that.tui.trim(e);
				that.$forceUpdate();
			},
			confirmInput(e) {
				let that = this;
				let rules = [
					// 
					{
						name: "keyword",
						rule: ["required", ], //可使用区间，此处主要测试功能
						msg: ["请输入搜索关键词", ]
					},
				];
				let checkRes = formCheck.validation({
					keyword: that.tui.trim(e),
				}, rules);
				if (checkRes) {
					that.tui.errorMsg(checkRes + "！")
					return;
				}
				that.pageData.keyword = that.tui.trim(e);
				that.listData.page = 0;
				that.initList();
			},
			initialize() {
				let that = this;
				let Int = setInterval(function() {
					that.user = that.tui.getCache("user");
					console.log('self:user=>', that.user);
					if (typeof(that.user) == 'object') {
						clearInterval(Int);
						that.__init();
					}
				}, 800);
			},
			async __init() {
				let that = this;
				that.appInit = that.tui.getCache("appInit");
				console.log('self:appInit=>', that.appInit);
				let response = '';
				response = await that.tui.get('/advert', {
					father_id: 1,
				});
				that.pageData.banner = response.data;
				that.pageData.loading = true;


				response = await that.tui.get('/advert', {
					father_id: 2,
					page: 0,
					limit: 4,
				});
				that.pageData.nav = response.data.data;
				response = await that.tui.get('/advert', {
					father_id: 3,
					page: 0,
					limit: 6,
				});
				that.pageData.advertisement = response.data.data;


				that.initList()
				that.tui.upDataUserInfo(function(res) {
					that.user = res.data;
					console.log('self:user=>', that.user);
				});
			},
			async detail(type, item = {}) {
				let that = this;
				switch (type) {
					case 'goodsClick':
						that.tui.urlHref('/pages/good-info' + '?' + that.tui.initParamsData({
							id: item.id,
							title: item.title,
						}));
						break;
					case 'banner':
						if (item.link !== null && that.tui.trim(item.link).length > 0) {
							window.location.href = item.link;
						} else {
							that.tui.urlHref('/pages/public-info?' + that.tui.initParamsData({
								title: item.title,
								id: item.id,
								tpl: 'banner',
							}));
						}
						break;
					default:
						console.log(type, item);
						break;
				};
			},
			async initList() {
				let that = this;
				if (that.listData.xhr.url === false) {
					that.listData.status = false;
					return;
				}
				if (that.listData.page == 0) {
					that.listData.data = [];
					that.listData.isMore = true;
					that.listData.status = true;
				}
				let param = {
					page: that.listData.page,
					length: that.tui.requestPageLength,
				};
				console.log(that.pageData.keyword);
				if (that.pageData.keyword !== '') {
					param.keyword = that.pageData.keyword;
				}
				let response = await that.tui.get(that.listData.xhr.url, param);
				switch (response.status) {
					case 0:
						response = response.data;
						// 当前分页为0的时候 返回数据为0  暂无数据
						if (response.count == 0) {
							that.listData.isMore = false;
							that.listData.xhr.status = false;
							that.listData.xhr.text = '暂无数据... ...';
						} else {
							if (that.listData.page == 0) {
								if (response.data.length < param.length) {
									that.listData.status = false;
								}
							}
							that.listData.data = that.listData.data.concat(response.data);
							if (response.data.length < param.length) {
								that.listData.isMore = false;
								that.listData.xhr.status = false;
								if (response.data.length != 0) {
									that.listData.xhr.text = '没有更多啦 ... ...';
								}
							}
						}
						break;
					default:
						that.tui.toast(response.info, false, function() {
							that.listData.isMore = false;
							that.listData.xhr.status = false;
							that.listData.xhr.text = response.info;
						}, 1500);
						break;
				}
				that.$forceUpdate();
			},
			initNavigation(e) {
				let that = this;
				that.header.opacity = e.opacity;
				that.header.top = e.top;
				that.$forceUpdate();
			},
			changeNavigation(e) {
				let that = this;
				that.header.opacity = e.opacity;
				that.$forceUpdate();
			},
			back() {
				let that = this;
				that.tui.urlBack(1);
			},
		},
		// 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
		onReachBottom() {
			let that = this;
			if (that.listData.isMore == true) {
				that.listData.page++
				that.initList();
			}
		},
		// 监听页面隐藏
		onHide() {
			let that = this;
		},
		// 监听页面卸载
		onUnload() {
			let that = this;
		},
		// 页面返回
		onBackPress() {
			let that = this;
		},
		// #ifdef MP
		onShareAppMessage() {
			// console.log('分享!')
		},
		// #endif
	}
</script>

<style scoped lang="scss">
	.tui-box {
		width: 100%;
		background: #fff;
		box-shadow: 0 3rpx 20rpx rgba(183, 183, 183, 0.1);
		border-radius: 10rpx;
		overflow: hidden;

		.tui-list {
			width: 100%;
			height: 134rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.tui-item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;

			}

			.tui-tool-item {
				width: 25%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				padding-top: 30rpx;
			}


			.tui-num {
				font-size: 32rpx;
				font-weight: 500;
				color: #333;
				position: relative;
			}

			.tui-text {
				font-size: 24rpx;
				font-weight: 400;
				color: #666;
				padding-top: 6rpx;
			}

			.tui-icon-box {

				.tui-icon {
					width: 56rpx;
					height: 56rpx;
					display: block;
				}

				.tui-badge-icon {
					width: 66rpx;
					height: 30rpx;
					position: absolute;
					right: 0;
					transform: translateX(88%);
					top: -15rpx;
				}
			}
		}
	}

	.top_bar {
		height: 110rpx;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.logo {
			width: 179rpx;
			height: 62rpx;

			image {
				width: 179rpx;
				height: 62rpx;
			}
		}

		.search_box {
			width: 471rpx;
			height: 70rpx;
		}
	}

	.banner {
		width: 690rpx;
		margin: 0 auto 20rpx;
	}

	.notice {
		width: 690rpx;
		height: 72rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 0 25rpx;
		box-sizing: border-box;
		margin: 0 auto 20rpx;
		display: flex;
		align-items: center;

		.notice_icon {
			padding-right: 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			border-right: 1px solid #E6E6E6;

			image {
				width: 23rpx;
				height: 27rpx;
				margin-right: 10rpx;
			}
		}

		.notice_list {
			margin-left: 30rpx;
			font-weight: 500;
			font-size: 26rpx;
			color: #333333;
			line-height: 33rpx;
		}
	}

	.menu_list {
		width: 690rpx;
		height: 184rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 auto 20rpx;
		padding: 30rpx 56rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.menu_item {
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 90rpx;
				height: 90rpx;
				margin-bottom: 10rpx;
			}

			.menu_text {
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
				line-height: 33rpx;
			}
		}
	}

	.cate_list {
		width: 690rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.cate_item {
			width: 335rpx;
			height: 200rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>